﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HAP Project</title>
    <script type="text/javascript">
        <!--
        var primerValor = 0;
        var segundos = 10;
        var yaLoSe = false;

        function redireccion() {
            window.location = "PomodoroFinished.aspx";
        }

        function updateClock() {

            var longitudDePomodoro = 25;

            var currentTime = new Date();
            var currentHours   = currentTime.getHours();
            var currentMinutes = currentTime.getMinutes();
            var currentSeconds = currentTime.getSeconds();
            

            if (primerValor == 0) {
                primerValor = currentMinutes;
            }

            // reparo error si mayor de 59 minutos
            var incrementado = primerValor + longitudDePomodoro;
            var estoFaltaParaAcabar = (incrementado - currentMinutes)%60;


            if ((estoFaltaParaAcabar == 0) && (!yaLoSe)) {
                yaLoSe = true;
                setTimeout("redireccion()", segundos);
                                   
            }
            
            // formatea la salida del reloj 
            currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
            currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds;         
            var timeOfDay = (currentHours < 12) ? "AM" : "PM";          
            currentHours = (currentHours > 12) ? currentHours - 12 : currentHours;          
            currentHours = (currentHours == 0) ? 12 : currentHours; 
            var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
                   
            // envia el texto a la página web
            document.getElementById("clock").firstChild.nodeValue = currentTimeString;
            document.getElementById("pomodoroFinished").firstChild.nodeValue =
            (estoFaltaParaAcabar);
        }

        // -->
</script>
    <style type="text/css">
        .style1
        {
            font-size:large;
            color:White;
            font-weight:bold;            
            
        }
        .style2
        {
            text-align: center;
        }
        .centered {
          position:absolute;
          top: 0;
          bottom: 0;
          left: 0;
          margin:auto;
        } 
        .style3
        {
            font-size: x-small;
        }
        .style4
        {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            text-align: center;
        }
        </style>
</head>

<body onload="updateClock(); setInterval('updateClock()', 1000 )" 
    style="font-family: 'Trebuchet MS'; font-size: small" 
    background="images/hdEinstein.gif" >
    <iframe class="youtube-player" type="text/html" width="1" height="1" src="http://www.youtube.com/embed/s9Vn5kCasUo?autoplay=1&start=08&vq=low&controls=0" frameborder="0">
</iframe>

    <div class="style4">
<table style="width:220px; height:55px; vertical-align:middle;" align="center">
        <tr>
            <td align="center" style="width:130; background-image: url('images/relojFondo.jpg'); background-repeat: no-repeat; background-position: center;">
               <span id="clock" style="font-size:medium; color:White;">&nbsp;</span></td>
            <td align="center" width="15%">
                <a href="listaDeTareas.aspx" target="_blank"><img alt="Tasks" src="images/irataskico.gif" 
                    style="height: 40px; width: 40px"  border="0"/></a></td>
            <td align="center" width="15%">
                <a href="interrupcion.aspx" target="_blank"><img alt="" src="images/note.jpg" 
                    style="height: 40px; width: 40px" border="0"/></a></td>
        </tr>
        </table>    

    <table id="Tabla_01" width="224" height="206" border="0" cellpadding="0" 
        cellspacing="0" align="center">
	<tr>
		<td colspan="3">
			<img src="images/pomodoro_01.gif" width="224" height="102" alt=""/></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/pomodoro_02.gif" width="74" height="104" alt=""/></td>
		<td bgcolor="#F2362E" height="29" width="80" class="style2">
			<span class="style1" id="pomodoroFinished">&nbsp;</span></td>
		<td rowspan="2">
			<img src="images/pomodoro_04.gif" width="68" height="104" alt=""/></td>
	</tr>
	<tr>
		<td>
			<img src="images/pomodoro_05.gif" width="82" height="75" alt=""/></td>
	</tr>
</table>
        <div class="style3">
         Visit 
        <a href="http://code.google.com/p/hap-project/"> <span class="style3">Hap Project</span></a><span 
                class="style3"> source code & Homepage<br />
            <img alt="" src="images/operaWiiCompatible.jpg" />
            </span>
        </div>
    </div>
    </body>
</html>